<template>
<div class="contentmain">
    <el-row>
        <el-col :span="24">
            <el-button type="danger" icon="el-icon-plus" @click="newadd">新增优惠券</el-button>
        </el-col>
    </el-row>
    
    <el-row>
        <el-col :span="24">
            <el-tabs v-model="activeName" @tab-click="handleClick" style="width:100%">
                <el-tab-pane label="周日" name="0"></el-tab-pane>
                <el-tab-pane label="周一" name="1"></el-tab-pane>
                <el-tab-pane label="周二" name="2"></el-tab-pane>
                <el-tab-pane label="周三" name="3"></el-tab-pane>
                <el-tab-pane label="周四" name="4"></el-tab-pane>
                <el-tab-pane label="周五" name="5"></el-tab-pane>
                <el-tab-pane label="周六" name="6"></el-tab-pane>
            </el-tabs>
        </el-col>
    </el-row>
    <!-- 新增 -->
    <el-table class="table-data" :data="td" style="width: 100%;margin-top: 20px"
                  v-loading="loading"
                  element-loading-text="数据加载中..." >
            <el-table-column label="图片" >
                <template slot-scope="scope">
                    <img :src="scope.row.image" style="width: 100px;vertical-align: middle;">
                </template>
            </el-table-column>
            <el-table-column prop="couponName" label="优惠券名称" ></el-table-column>
            <el-table-column prop="couponPrice" label="优惠金额" ></el-table-column>
            <el-table-column label="领取时间" >
                <template slot-scope="scope">
                    <span>{{scope.row.receiveBeginTime | format}}<br />至<br />{{scope.row.receiveEndTime | format}}</span>
                </template>
            </el-table-column>
            <el-table-column label="使用时间/时长" >
                <template slot-scope="scope">
                    <span v-if="scope.row.scopeType == 1">{{scope.row.useBeginTime|format}}<br />至<br />{{scope.row.useEndTime|format}}</span>
                    <span v-if="scope.row.scopeType == 2">{{scope.row.durationDay}}天</span>
                </template>
            </el-table-column>
            <el-table-column prop="totalCount" label="数量" ></el-table-column>
            <el-table-column label="状态" >
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == 0" type="gray">未发布</el-tag>
                    <el-tag v-if="scope.row.status == 1" type="primary">已发布</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="优惠券类型" >
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.scopeType == 1" type="gray">范围优惠券</el-tag>
                    <el-tag v-if="scope.row.scopeType == 2" type="primary">时长优惠券</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="使用类型" >
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.useType == 0" type="gray">全部商品</el-tag>
                    <el-tag v-if="scope.row.useType == 1" type="primary">指定商品</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    <!-- 表格 -->
    <el-row>
        <el-col :span="8" :offset="16">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="pagecount">
            </el-pagination>
        </el-col>
    </el-row>
    <!-- 分页 -->
        <CouLists @getcousid="getcousid" />
    <!-- dialog -->
</div>
</template>
<script>
import moment from 'moment'
import CouLists from 'components/Coupon/CouLists'
export default {
    data(){
        return{
            td:[],
            loading:false,
            currentPage:1,
            pagecount:0,
            weekend:0
        }
    },
    filters:{
        format(v){//入参时间戳,返回正常时间
            return moment(v).format("YYYY-MM-DD h:mm:ss")
        }
    },
    components:{
        CouLists
    },
    mounted(){
        var pp=new URLSearchParams()
        pp.append('type',0)
        this.getData(pp)
    },
    methods:{
        newadd(){//新增
            this.$store.commit('ChangeCouLists')
        },
        handleSizeChange(i){//翻页
            this.topage(i)
        },
        handleCurrentChange(i){//翻页
            this.topage(i)
        },
        topage(i){//翻页
            var pp=new URLSearchParams()
            pp.append('pageNo',i)
            pp.append('type',this.weekend)
            this.getData(pp)
        },
        handleDelete(i,r){//删除
            var _this=this
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var pp=new URLSearchParams()
                pp.append('couponId',r.couponId)
                pp.append('type',this.weekend)
                axios.get('/deleteRelationCoupon.do',{params:pp}).then(r=>{
                    if(r.data.code==200){
                        _this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        var pw=new URLSearchParams()
                        pw.append('type',this.weekend)
                        _this.getData(pw)
                    }else{
                        _this.$message.error(r.data.message)
                    }
                })
                
            }).catch(() => {});
        },
        getcousid(m){//获取优惠券id和时间提交到保存接口
            var _this=this
            var pp=new URLSearchParams()
            pp.append('couponId',m)
            pp.append('type',this.weekend)
            axios.get('/relationCoupon.do',{params:pp}).then(r=>{
                if(r.data.code==200){
                    _this.$message.success("添加成功")
                    var ps=new URLSearchParams()
                    ps.append('type',this.weekend)
                    _this.getData(ps)
                }else{
                    _this.$message.error(r.data.message)
                }
            })
        },
        handleClick(tab, event){//标签页切换
            this.weekend=tab.index
            var pp=new URLSearchParams()
            pp.append('type',tab.index)
            this.getData(pp)
        },
        getData(v){//获取数据
            if(!this.$store.state.shiro){
                return
            }
            var _this=this
            this.loading=true
            axios.get('/weekendCouponList.do',{params:v}).then(r=>{
                if(r.data.code==200){
                    _this.td=[].concat(r.data.response.couponList)
                    _this.pagecount=r.data.response.page.totalCount
                    _this.loading=false
                }else{
                    if(r.data.message=="not login"&&r.data.code==500){
                        _this.$message.error("访问者,请登录")
                        router.push('/Login');
                        return
                    }
                    _this.$message.error(r.data.message)
                    _this.loading=false
                }
            })
        }
    }
}
</script>
